import React from "react";
import ReactDOM from "react-dom/client";

/**
 * 函数形式的ref的使用，有个小问题。了解一下即可。不用关注
 *
 *    当内联的函数形式的ref时，当组件重新render的时候，这个函数会被执行两次。
 *    第一次传递的参数为null
 *    第二次传递的参数才正确
 *
 * render函数会执行多次的，里面的内联的箭头函数，每次都是一份全新的。。。
 */
class App extends React.Component {
  state = {
    name: "张三",
  };

  inputRefBind = (el) => {
    console.log("input ref 函数", el);
    this.inputRef = el;
  };

  handleClick = () => {
    this.setState({
      name: "李四",
    });
  };

  render() {
    return (
      <div>
        <h1>App - {this.state.name}</h1>
        <input
          ref={(el) => {
            console.log("input ref 函数", el);
            this.inputRef = el;
          }}
          type="text"
          placeholder="请输入内容"
        />

        <button onClick={this.handleClick}>点击修改 name</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);

/**
 * 下面的代码能移除滚动条事件嘛？？ 不能的！！！！
 */
window.addEventListener("scroll", () => {
  console.log(1);
});

window.removeEventListener("scroll", () => {
  console.log(1);
});

/**
 * 上面的这个问题的触发方法是，把回调函数给抽离出去
 */
function onScoll() {
  console.log(1);
}

window.addEventListener("scroll", onScoll);

window.removeEventListener("scroll", onScoll);

let fn1;
let fn2;

function render() {
  fn1 = () => {
    console.log("1");
  };
}

render();

fn2 = fn1;
console.log(fn2 === fn1); // true

render();
console.log(fn2 === fn1); // false
